<template>
  <el-container style="text-align: right; font-size: 12px">
    <el-backtop :bottom="60"></el-backtop>
    <!--********** 头部 -->
    <el-header style="height:auto">
      <e-header></e-header>
      <e-contentFrame> </e-contentFrame>
      <e-contentTag> </e-contentTag>
      <!-- 广告位 -->
      <div class="new-advlocation">
        <e-advertisingSpace> </e-advertisingSpace>
      </div>
    </el-header>
    <!--********** 主体 -->
    <el-main style="height:auto">
      <!-- <div
        class="mo_login"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#ffffff"
      > -->
      <div class="mo_login">
        <div class="addbreadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"
              >您当前的位置：首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/MessageList' }">
              <span @click="ToMessageList(cate_id, text_cate_name)">
                文章详情
              </span>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div @click="Postfollow()">
            <el-button
              type="warning"
              icon="el-icon-star-off"
              circle
            ></el-button>
            <span class="addpadd">收藏文章 </span>
          </div>
        </div>
        <div class="periphery">
          <div class="p-title">
            <p class="textOut">{{ text_title }}</p>
          </div>
          <div class="p-mesg">
            <span class="addright">{{ text_date }} </span>
            <span class="addleft">{{ name }}</span>
          </div>
          <div class="p-img">
            <el-image
              class="addimg"
              :src="imgsurl + text_img"
              fit="cover"
            ></el-image>
          </div>
          <div class="p-text" v-html="text_content">{{ text_content }}</div>

          <div class="up-next">
            <div class="text-up" @click="reduce()">
              <p class="addcolor textOut">上一篇:{{ text_up }}</p>
            </div>
            <div class="text-next" @click="addnum()">
              <p class="addcolor textOut">下一篇:{{ text_next }}</p>
            </div>
          </div>
          <div class="phone-call" v-show="getacount">
            <span>
              <i class="el-icon-phone"></i> 联系电话：{{ userphone }}</span
            >
          </div>
        </div>
      </div>
    </el-main>
    <!--********** 底部 -->
    <el-footer style="height:auto">
      <e-footer></e-footer>
    </el-footer>
  </el-container>
</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eContentFrame from "@/components/public/ContentFrame.vue";
import eContentTag from "@/components/public/ContentTag.vue";
import eAdvertisingSpace from "@/components/public/AdvertisingSpace.vue";
import eFooter from "@/components/public/Footer.vue";

export default {
  components: {
    eHeader,
    eContentFrame,
    eContentTag,
    eAdvertisingSpace,
    eFooter
  },
  data() {
    return {
      imgsurl: this.$urls,
      text_cate_name: "",
      text_title: "",
      text_date: "",
      name: "",
      text_img: "",
      text_content: "",
      userphone: "",
      addTotal: 0,
      textid: 0,
      cate_id: 0,
      text_up: "",
      text_up_id: "",
      text_next: "",
      text_next_id: "",
      loading: false,
      getacount: true
    };
  },
  created() {
    this.textid = sessionStorage.getItem("Details");
    this.cate_id = sessionStorage.getItem("Details_cate_id");

    //项目详情
    this.Postdetail();
  },
  mounted() {},
  methods: {
    //上一篇
    getUpMesDetials(textid, cate_id) {
      const _this = this;
      let Url = "/articledetail?a_id=" + textid + "&cate_id=" + cate_id;
      let Params = {};
      _this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            // eslint-disable-next-line no-case-declarations
            let adddata = resdata.data;
            if (adddata == null) {
              _this.text_up = "没有上一篇了";
            } else {
              _this.text_up = adddata.title;
            }
            _this.loading = false;
            break;
          case 1002:
            _this.loading = false;
            break;
        }
      });
    },
    //下一篇
    getNextMesDetials(textid, cate_id) {
      const _this = this;
      let Url = "/articledetail?a_id=" + textid + "&cate_id=" + cate_id;
      let Params = {};
      _this.$https.fetchGet(Url, Params).then(res => {
        let resdata = res.data;
        switch (resdata.code) {
          case 1000:
            // eslint-disable-next-line no-case-declarations
            let adddata = resdata.data;
            if (adddata == null) {
              _this.text_next = "没有下一篇了";
            } else {
              _this.text_next = adddata.title;
            }
            _this.loading = false;
            break;
          case 1002:
            _this.loading = false;
            //console.log(resdata.msg)
            break;
        }
      });
    },
    // 点击上一篇
    reduce() {
      const _this = this;
      _this.getMesDetials(_this.text_up_id, _this.cate_id);
    },
    //点击下一篇
    addnum() {
      const _this = this;
      _this.getMesDetials(_this.text_next_id, _this.cate_id);
    },
    //精推热点分类跳转
    ToMessageList(listId, listname) {
      const _this = this;
      sessionStorage.setItem("Details", listId);
      _this.$bus.$emit("change", listId);
      _this.$bus.$emit("changename", listname);

      _this.$router.push({
        path: "/MessageList",
        // name: 'MessageList',
        // params: {
        //     name: this.hotname,
        //     id: listId
        // }
        query: {
          name: listname,
          id: listId
        }
      });
    },
    //消息提示
    showError(type, status) {
      this.$message({
        type: type,
        showClose: true,
        center: true,
        message: status
      });
    },
    //收藏文章
    Postfollow() {
      let _this = this;
      //多个代理可以的封装头是要与URL分开写的，不然系统可能识别不出来。
      //let Url = "/api/statis";
      let Params = {
        id: 3
      };
      _this.$axios.post(_this.$basis + "/follow_option", Params).then(res => {
        //let data = res.data.data;
        let resdata = res.data;
        console.log(res);

        switch (resdata.code) {
          case 0:
            console.log(resdata.success);
            break;
          case 1:
            console.log(resdata.msg);
            break;
        }
      });
    },
    //项目详情
    Postdetail() {
      let _this = this;
      //多个代理可以的封装头是要与URL分开写的，不然系统可能识别不出来。
      //let Url = "/api/statis";
      let Params = {
        id: 4
      };
      _this.$axios.post(_this.$basis + "/project_detail", Params).then(res => {
        let data = res.data.data;
        let resdata = res.data;
        console.log(111);
        console.log(res);

        switch (resdata.code) {
          case 0:
            _this.text_title = data.title;
            _this.text_date = data.update_time;
            _this.name = data.company_name;
            _this.text_img = data.imgs;
            _this.text_content = data.content;
            _this.userphone = data.phone;

            break;
          case 1:
            console.log(resdata.msg);
            break;
        }
      });
    },
    // eslint-disable-next-line no-irregular-whitespace
    //HTML标签反转义（  &lt; ----> < ）
    Escape2Html(str) {
      var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
        return arrEntities[t];
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-container {
  overflow: hidden;
}
.new-advlocation {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 770px;
  height: 260px;
  .adv_container {
    height: 260px;
    .middle-net {
      height: 260px;
    }
  }
}
.el-main {
  overflow: hidden;
  padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
  animation: bubble $send1 linear infinite,
    direction $send2 ease-in-out infinite alternate;
}
.mo_login {
  position: relative;
  max-width: 1200px;
  width: 100%;
  min-width: 1000px;
  height: auto;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 35px;
  min-height: 685px;

  background: #fbfbfb;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  &:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
    z-index: -1;
  }
  .addbreadcrumb {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding-top: 3px;
    padding-left: 22px;
    .el-breadcrumb {
      width: 80%;
      line-height: 35px;
    }
    .addpadd {
      padding-left: 5px;
    }
  }
  .periphery {
    width: 100%;
    height: auto;
    min-height: 635px;
    background: #ffffff;
    padding-top: 42px;
    overflow: hidden;
    .p-title {
      width: 100%;
      height: 38px;
      font-size: 27px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #252525;
      line-height: 38px;
      text-align: center;
    }
    .p-mesg {
      width: 100;
      height: 14px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #909339;
      line-height: 14px;
      margin-top: 18px;
      text-align: center;
      .addright {
        padding-right: 10px;
      }
      .addleft {
        padding-left: 10px;
      }
    }
    .p-img {
      width: 100%;
      height: 310px;
      border-radius: 6px;
      padding: 0 12% 0 13%;
      margin-top: 41px;
      .addimg {
        width: 100%;
        height: 100%;
      }
    }
    .p-text {
      width: 100%;
      height: auto;
      padding: 40px 46px 0 46px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 31px;
      letter-spacing: 1px;
      text-align: justify;
    }
    .up-next {
      width: 100%;
      height: 30px;
      margin-top: 35px;
      margin-bottom: 15px;
      padding: 4px 16px 0 16px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      letter-spacing: 1px;
      text-align: justify;
      .text-up {
        width: 20%;
        height: 100%;
        float: left;
        color: #333333;
        .addcolor:hover {
          color: #558ffb;
          text-decoration: underline;
        }
      }
      .text-next {
        width: 20%;
        height: 100%;
        float: right;
        .addcolor:hover {
          color: #558ffb;
          text-decoration: underline;
        }
      }
    }
    .phone-call {
      width: 100%;
      height: 30px;
      margin-top: 35px;
      margin-bottom: 15px;
      padding: 4px 16px 0 16px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      letter-spacing: 1px;
      text-align: justify;
    }
  }
}
.mo_login /deep/ .el-loading-spinner {
  font-size: 30px;
}
.DAEBFF {
  background: #daebff;
}
.F5F5FD {
  background: #f5f5fd;
}
.F0FFFE {
  background: #f0fffe;
}
.textOut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>
